import 'package:flutter/material.dart';
import 'package:flutterapp/emoji/extend_menu.dart';

class EmojiPage extends StatefulWidget {
  @override
  _EmojiPageState createState() => _EmojiPageState();
}

class _EmojiPageState extends State<EmojiPage> with TickerProviderStateMixin {
  var _index = -1;
  FocusNode _focusNode = FocusNode();

  hideKeyBoard() {
    if (_focusNode.hasFocus) FocusScope.of(context).requestFocus(FocusNode());
  }

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus)
        setState(() {
          _index = -1;
        });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('emoji'),
      ),
      body: GestureDetector(
        onTap: () {
          hideKeyBoard();
          setState(() {
            _index = -1;
          });
        },
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.black12,
              ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    focusNode: _focusNode,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.tag_faces),
                  onPressed: () {
                    hideKeyBoard();
                    setState(() {
                      _index = _index == 0 ? -1 : 0;
                    });
                  },
                ),
                IconButton(
                  icon: Icon(Icons.add_circle_outline),
                  onPressed: () {
                    hideKeyBoard();
                    setState(() {
                      _index = _index == 1 ? -1 : 1;
                    });
                  },
                ),
              ],
            ),
            ExtendMenu(
              index: _index,
              children: <Widget>[
                AnimWidget(),
                AnimWidget2(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class AnimWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.blueGrey,
      child: ListView(
        shrinkWrap: true,
        children: List.generate(5, (i) => Text(i.toString())),
      ),
    );
  }
}

class AnimWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.lightGreen,
      child: ListView(
        shrinkWrap: true,
        children: List.generate(10, (i) => Text(i.toString())),
      ),
    );
  }
}
